<template>
  <div class="body">
<!--    <div class="atom" v-for="(item,index) in list">
      <div style="display: flex;justify-content: space-between; align-items: center">
        <div style="border-radius: 50%;background-color: orange;color: white;width: 30px;height: 30px;text-align: center;align-items: center"><h3>{{index+1}}</h3></div>
        <h4>{{item.film_name}}</h4>
        <el-button type="primary" @click="pushToDetail(item.id)" size="mini">详情</el-button>
      </div>
      <el-divider></el-divider>
    </div>-->
    <el-table
    :data="list">
      <el-table-column
      prop="film_name">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button type="primary" @click="pushToDetail(scope.row.id)" size="mini">详情</el-button>
        </template>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    export default {
        name: "SimpleList",
      props:{
          list:[],
      },
      data(){
        return{

        }
      },
      methods:{
        pushToDetail(param){
          this.$router.push({path:'/viewMovie/MovieDetail',query:{"filmId":param}})
        },
      }
    }
</script>

<style scoped>
  .body{
    display: table;
    width: 100%;
    justify-content: center;
  }
  .atom{
    width: 100%;
    align-items: center;
  }
</style>
